<template>
    <div>
        <van-nav-bar title="标题"/>
        <van-cell title="选择站台" icon="location-o" @click="showPopup" :value="columns[picker_index]" is-link/>
        <van-popup v-model="show"
                   position="bottom"
                   :style="{ height: '38%' }"
        >
            <van-picker :columns="columns" @change="onChange"/>
        </van-popup>

        <van-search placeholder="请输入单号" v-model="code_number"/>


        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <van-cell
                    v-for="item in list"
                    :key="item.code_id"
                    :title="'单号: ' + item.oitm_code"
                    :label="item.oitm_name"
                    :value="item.number + ' (吨)'"
                    is-link
                    :to="{ path: 'detail/11', params: { id: 123 }, query: { plan: 'private' } }"
            >
            </van-cell>
        </van-list>
    </div>
</template>

<script>
    import {NavBar, Cell, Popup, Picker, Search, List, Toast} from 'vant';


    export default {
        components: {
            [NavBar.name]: NavBar,
            [Cell.name]: Cell,
            [Popup.name]: Popup,
            [Picker.name]: Picker,
            [Search.name]: Search,
            [List.name]: List,
        },

        data() {
            return {
                columns: ['仓库A', '仓库B', '仓库C', '仓库D', '仓库E'],
                show: false,
                picker_index: 0,
                list: [],
                loading: false,
                finished: false,
                code_number: '',
            };
        },

        beforeCreate: function () {
            console.log('beforeCreate')
        },
        created: function () {
            console.log('created')
        },
        beforeMount: function () {
            console.log('beforeMount')
        },
        mounted: function () {
            console.log('mounted')
        },
        beforeUpdate: function () {
            console.log('beforeUpdate')
        },
        updated: function () {
            console.log('updated')
        },
        activated: function () {
            console.log('activated')
        },
        deactivated: function () {
            console.log('deactivated')
        },
        beforeDestroy: function () {
            console.log('beforeDestroy')
        },
        destroyed: function () {
            console.log('destroyed')
        },
        errorCaptured: function () {
            console.log('errorCaptured')
        },

        computed: {},

        methods: {
            onChange(picker, value, index) {
                this.picker_index = index;
                Toast(`当前值：${value}, 当前索引：${index}`);
                this.show = false;
            },
            showPopup() {
                this.show = true;
            },
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    let oitm_one = {
                        code_id: 2343454,
                        add_time: '2019-12-23',
                        oitm_code: 2101030002,
                        oitm_name: '510S(4.0P/10kg)肉杂鸡配合饲料',
                        cangku: '昌吉xx仓库',
                        number: 50
                    };
                    for (let i = 0; i < 10; i++) {
                        this.list.push(oitm_one);
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 15) {
                        this.finished = true;
                    }
                }, 500);
            },
            onClickLeft() {
                Toast('返回');
                this.$router.go(-1);
            },
            onClickRight() {
                Toast('按钮');
            }
        }
    };
</script>

<style lang="less">


</style>
